<template>
    <div id="subPage">
        <div class="top">
            <div class="list" style="justify-content: space-between">
                <div class="search-left">
                    <div class="item daterange">
                        <span class="name">创建日期:</span>
                        <DatePicker
                            :editable='false'
                            type="daterange"
                            transfer
                            :options="options"
                            :clearable="true"
                            v-model="dateArr"
                            format="yyyy-MM-dd"
                            placement="top-start"
                            show-week-numbers
                            placeholder="请选择日期"
                            style="width: 250px;left:0;top:0;"
                            @on-change="getDateArr">
                        </DatePicker>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                </div>
                <div class="search-right">
                    <div class="operationBox">
                        <div class="tableBtn" @click="$router.push({path:'/safety/rectifyData'})" v-if="auth.isAdd" >
                            <div class="btnBox">
                                <span class="el-icon-circle-plus-outline" style="font-size:0.2rem;margin-right:0.1rem;cursor:pointer;"></span>
                                <div class="text">整改通知单</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="tableBox">
                <div class="tableList">
                    <el-table ref="table" :data="list" :height="tableHeight" :stripe="true">
                        <template slot="empty">
                            <div class="no_lsit" style="width:96%;margin:auto;">
                                <img src="./../../assets/images/common/rotary_nodata.png" style="width:3.9rem; height: 2.4rem;">
                            </div>
                        </template>
                        <el-table-column label="受检单位" prop="corpName"></el-table-column>
                        <el-table-column label="问题数量" prop="questionNum"></el-table-column>
                        <el-table-column label="创建人" prop="createUserName"></el-table-column>
                        <el-table-column label="创建时间" prop="createTime"></el-table-column>
                        <el-table-column label="状态" prop="state">
                            <template slot-scope="scope">
                                <span v-if="scope.row.state == 1" style="color: #28D79C">已通过</span>
                                <span v-if="scope.row.state == 2" style="color: #FF4848">待批准</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button v-if="auth.isExport" style="color:#00ACFB;" type="text" size="small" @click="getSafetyRectifyExportFn(scope.row.rectifyId)" v-preventReClick="1500">导出</el-button>
                                <el-button style="color:#00ACFB;" type="text" size="small" v-preventReClick="1500" @click="toDetails(scope.row)">详情</el-button>
                                <el-button v-if="auth.isDelete" style="color:#FF001E" @click.native.prevent="removeRow(scope.row.rectifyId)" type="text" size="small">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix pageFix" v-show="list.length>0">
                    <div class="float-right">
                        <Page
                            v-if="totalCount"
                            :current.sync="current"
                            :total="totalCount"
                            :page-size="pageSize"
                            show-elevator
                            show-total
                            @on-change="pageChange">
                        </Page>
                    </div>
                </div>
            </div>
        </div>
            
        <Modal v-model="exportModal" title="导出" width="500px;" :mask-closable="false" class-name='addModal' :footer-hide="true">
            <div style="margin:20px auto;text-align: center;"><img src="../../assets/images/common/succes-iocn.png" style="width: 60px;height: 60px;display: block;margin: auto" alt=""></div>
            <div style="margin:20px auto;text-align: center;">导出任务已创建！</div>
            <div style="margin:20px auto;text-align: center;display: flex;justify-content: center;align-items: center;">
                <p>系统正在处理，请稍后到</p>
                <router-link to="/exp/list">导出记录</router-link>
                <p>下载。</p>
            </div>
        </Modal>
        <delModal :delModal="delModal" :delId="delId" :delTitle="delTitle" :delContent="delContent" :setDelFn="setSafetyRectifyDel" @handleDelClose="handleDelClose" @handleDelSubmit="handleDelSubmit" ></delModal>

    </div>
</template>
<script>
import {
    getSafetyRectifyExport,
    getSafetyRectifyList,
    setSafetyRectifyDel
} from "@/api/safety";
import {initYMD} from '@/sever/utils'
import delModal from "../delModal";

export default {
    components: {delModal},
    data() {
        return {
            exportModal:false,
            length: 32,
            options: {//时间配置参数
                disabledDate(date) {
                    return date && date.valueOf() > Date.now();
                }
            },
            dateArr: [],//整改通知日期
            current: 1,//当前页面下标
            pageNum: "1",//分页下表
            pageSize: 12,//分页数量
            totalCount: 0,//已处理列表总数
            list: [],//数据列表
            btnList: [],//权限
            isAdd: true,//数据处理节流阀
            rectifyModal: false,//整改通知弹框
            corpList: [],//被罚单位列表
            deptId: "",//组织机构ID
            //删除
            delModal:false,
            delId:'',
            setSafetyRectifyDel,//删除函数
            delContent:'您是否确认删除此条数据？',//删除内容
            delTitle:"删除整改通知单",
            auth:{
                isAdd:false,
                isDelete: false,
                isExport:false,
            }, 
            tableHeight: window.innerHeight - 325
        }
    },
    methods: {
        initAuth(){
            this.auth.isAdd = this.btnList.includes('safety/rectify/add')
            this.auth.isDelete = this.btnList.includes('safety/rectify/del')
            this.auth.isExport = this.btnList.includes('safety/rectify/export')
        },
        //导出
        getSafetyRectifyExportFn(rectifyId){
            let params = {
                rectifyId,
            }
            getSafetyRectifyExport(params).then(res => {
                if (res.code == 200) {
                    this.exportModal = true;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
                .catch(error => {
                    console.log(error);
                });
        },
        //   导出
        goEXP(){
            this.$router.push({ path: "/exp/list" });
        },
        //前往详情
        toDetails(item){
            localStorage.setItem('rectifyData',JSON.stringify(item))
            this.$router.push({path:"/safety/rectifyData"})
        },
        getDateArr(i, v) {
            this.pageNum = 1;
            this.current = 1;
            this.dateArr = i;
            this.getAllList();
        },
        //删除数据弹框显示
        removeRow(id) {
            this.delModal = true;
            this.delId = Number(id);
        },
        handleDelSubmit(delModal){
            this.delModal = delModal;
            this.current = 1;
            this.pageNum = 1;
            this.getAllList();
        },
        handleDelClose(delModal){
            this.delModal = delModal;
        },
        //获取列表数据
        getAllList() {
            let params = {
                deptId: this.deptId,
                startTime: this.dateArr[0] ? initYMD(this.dateArr[0]) : '',
                endTime: this.dateArr[1] ? initYMD(this.dateArr[1]) : '',
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            }
            let resParams = {};
            for (let key in params) {
                if (params[key]) {
                    resParams[key] = params[key]
                }
            }
            getSafetyRectifyList(resParams)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //分页
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        //取消关闭集合
        cancel(active) {
            if (active == 1) {
                this.rectifyModal = false;
            } else if (active == 2) {
                this.delModal = false;
            }
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.initAuth()
        localStorage.removeItem('rectifyData');
        this.getAllList();
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.getAllList();
            }
        }
    },
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style lang="scss" scoped>
@import "./../../assets/style/qualityAndSafety/modal.scss";

/deep/ .tableBox {
    width: 100%;
    height: 100%;
    .pageFix {
        margin-top: 10px;
        display: flex;
        justify-content: center;
    }

    .tableList {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin: auto;

        .el-table--border::after, .el-table--group::after, .el-table::before {
            display: none;
        }

        .el-table {
            color: #333333;
            font-family: MicrosoftYaHei;
            font-size: 14px;

            thead tr {
                border-radius: 6px !important;
                th {
                    padding: 12px 0;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                }
            }
        }

        .el-table__row {
            background-color: #fff;
            cursor: pointer;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            border-bottom: 1px solid #eee;

            &.el-table__row--level-1,
            &.el-table__row--level-2 {
                background-color: #FAFCFC !important;
            }

            td {
                padding: 10px 0;
            }
        }

        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background-color: #fff;
            cursor: pointer;
        }
    }
}

/deep/ .el-icon-circle-close {
    color: #fff !important;
}

#subPage {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .top {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 6px;

        .list {
            width: 100%;
            padding: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 1px solid #F3F3F3;
            box-sizing: border-box;

            &.tab {
                padding: 20px;
                box-sizing: border-box;

                /deep/ .search-left {
                    .ivu-tabs-bar {
                        border: none;
                    }

                    .ivu-tabs-bar {
                        width: 100%;
                        margin: 0 auto;
                        border: none;
                    }

                    .ivu-tabs-tab {
                        padding-top: 0 !important;
                        padding-bottom: 19px;
                        box-sizing: border-box;
                    }
                }

                .search-right {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-start;
                    margin-top: -15px;

                    .operationBox {
                        padding: 0;
                    }
                }
            }

            .item {
                height: 40px;
                margin-right: 20px;
                position: relative;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    color: #333333;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    width: 80px;
                }

                .sub {
                    flex: 1;
                }
            }
        }
    }

    .infoList {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .item {
            width: 15%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 1.6%;
            padding: 10px 10px;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 6px;

            &:last-of-type {
                margin-right: 0;
            }

            .left {
                width: 92px;
                height: 92px;
                margin-right: 15px;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            .right {
                flex: 1;

                .name {
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #666666;
                    margin-bottom: 16px;
                }

                .num {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 24px;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    color: #E65159;
                }
            }
        }
    }

    .operationBox {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tableBtn {
            width: 120px;
            height: 35px;
            background: var(--themeColor);
            border-radius: 3px;
            text-align: center;
            line-height: 35px;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;

            .btnBox {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            &:hover {
                opacity: 0.7;
            }
        }
    }

    .bottom {
        width: 100%;
        height: calc(100% - 95px);
        border-radius: 6px;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
    }
}


/deep/ .custom-tree-node {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
        .btn {
            visibility: visible !important;
        }
    }

    p {
        width: 75%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .title {
        flex: 1;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #244348;
        font-weight: Bold;
    }

    .sub {
        width: 21px;
        height: 21px;
        background: #F7DED6;
        opacity: 0.7;
        border-radius: 6px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #F36E65;
        line-height: 21px;
        text-align: center;
        margin-right: 5px;
    }

    .btn {
        width: 20%;
        height: 31px;
        line-height: 31px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        //color: #F0F9FE;
        padding-right: 10px;
        box-sizing: border-box;
        visibility: hidden;
    }
}

/deep/ .ivu-page-next,
/deep/ .ivu-page-prev {
    width: 44px;
    height: 44px;
    background: #F8F9FB;
    border-radius: 4px;
    border: none !important;
    color: #9AA1A8 !important;
    line-height: 44px;

    a {
        font-size: 14px;
        color: #32585A;
    }
}

/deep/ .ivu-page-item {
    width: 44px;
    height: 44px;
    line-height: 44px;
    a {
        font-size: 14px;
        color: #32585A;
    }
}

/deep/ .ivu-page-options-elevator {
    height: 44px;
}

/deep/ .ivu-page-options-elevator input {
    width: 67px;
    height: 44px;
    border-radius: 4px;
}

.hideAdd {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
</style>
